<template>
  <div class="component-base-config">
    <div
      class="content-pad-item__title with-tag"
      :class="{ 'is-open': contentVisible }"
      @click.stop="changeVisible"
    >
      图例
    </div>
    <el-collapse-transition>
      <div v-show="contentVisible" style="margin-top: 8px">
        <div class="row-grid">
          <p>显示图例</p>
          <el-switch v-model="legend.show" />
        </div>
        <el-collapse-transition>
          <div v-show="legend.show" class="legend-content">
            <div class="row-grid">
              <p>对齐方式</p>
              <el-select v-model="legend.orient" style="width: 100%">
                <el-option label="水平对齐" value="horizontal" />
                <el-option label="垂直对齐" value="vertical" />
              </el-select>
            </div>
            <div class="row-grid">
              <p>图标设置</p>
              <div class="content-pad-row">
                <div class="row-grid">
                  <p>W</p>
                  <el-input-number
                    v-model="legend.itemWidth"
                    :step="1"
                    :min="10"
                    :max="50"
                    controls-position="right"
                  />
                </div>
                <div class="row-grid">
                  <p>H</p>
                  <el-input-number
                    v-model="legend.itemHeight"
                    :step="1"
                    :min="6"
                    :max="50"
                    controls-position="right"
                  />
                </div>
              </div>
            </div>
            <div class="row-grid">
              <p>图标高度</p>
              <el-input-number
                v-model="legend.itemHeight"
                :step="1"
                :min="6"
                :max="50"
                controls-position="right"
              />
            </div>
            <div class="row-grid">
              <p>字体设置</p>
              <el-color-picker v-model="legend.textStyle.color" />
              <el-select
                v-model="legend.textStyle.fontWeight"
                style="margin-left: 8px"
              >
                <el-option label="正常" value="normal" />
                <el-option label="较粗" value="bolder" />
                <el-option label="较细" value="lighter" />
              </el-select>
              <el-input-number
                v-model="legend.textStyle.fontSize"
                :step="1"
                :min="8"
                :max="40"
                controls-position="right"
                style="margin-left: 8px"
              />
            </div>
          </div>
        </el-collapse-transition>
      </div>
    </el-collapse-transition>
  </div>
</template>

<script>
import { objectDeepClone } from '../../../untils/commonUtils';
import { legend } from '../../../data/defaultConfig';
export default {
  name: 'MLegend',
  data(){
    return{
      legend:legend,
      contentVisible:false
    }
  },
  computed: {
    acComponent(){
      return this.$store.state.imageDragMoudules.acComponent;
    },
    acComponentId(){
      return this.$store.state.imageDragMoudules.acComponent.id;
    }
  },
  methods:{
    changeVisible(){
      this.contentVisible = !this.contentVisible;
    }
  },
  watch:{
    acComponentId:{
      handler(newVal, oldVal) {
        console.log("点击：",newVal);
        this.contentVisible = false;
        !!newVal && this.acComponent && objectDeepClone(this.legend, this.acComponent.legend);
      },
      deep: true,
      immediate: true
    },
    legend:{
      handler(newVal, oldVal) {
        console.log("legend：",newVal);
        this.$store.commit('updateComponent', { newState: this.legend, key: 'legend' });
      },
      deep: true,
      immediate: true
    },
  }
}
</script>

<style lang="scss" scoped>
.legend-content {
  margin-top: 8px;
  > .config-form-item + .config-form-item {
    margin-top: 8px;
  }
}
</style>
